<template>
  <div id="contentBox">
    <h3>{{ questionName }}</h3>
    <div v-for="(item,index) in questionList" :key="index">
      <p>{{ item.topicName }}{{ item.type===1 ? '【单选题】':'【多选题】' }}{{ "本题有效填写人数:"+ item.count }}</p>
      <el-table
        :data="item.answers"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :element-loading-text="g.loadingStr"
        :header-cell-style="{background:g.mainColor}"
      >
        <el-table-column label="选项" align="center" fixed>
          <template slot-scope="{row}">
            <span>{{ row.answerName }}</span>
          </template>
        </el-table-column>
        <el-table-column label="小计" align="center" fixed>
          <template slot-scope="{row}">
            <span>{{ row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column label="比例" align="center" fixed>
          <template slot-scope="{row}">
            <el-progress :percentage="row.discount" :stroke-width="15" />
          </template>
        </el-table-column>
        <el-table-column label="用户选择" align="center" fixed>
          <template slot-scope="{row}">
            <el-button type="primary" size="mini" @click="handleCheck(row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog title="用户选择" :visible.sync="checkDataDialog" width="800px">
      <el-table
        :data="userChoose"
        border
        fit
        highlight-current-row
        style="width: 100%;"
        :element-loading-text="g.loadingStr"
        :header-cell-style="{background:g.mainColor}"
      >
        <el-table-column label="用户名" align="center" fixed>
          <template slot-scope="{row}">
            <span>{{ row.name }}</span>
          </template>
        </el-table-column>
        <el-table-column label="联系方式" align="center" fixed>
          <template slot-scope="{row}">
            <span>{{ row.phone }}</span>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="listQuery.currentPage"
        :limit.sync="listQuery.pageSize"
        @pagination="getList"
      />
      <span slot="footer" class="dialog-footer">
        <el-button @click="checkDataDialog = false">取 消</el-button>
        <el-button type="primary" @click="checkDataDialog = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as Question from '@/api/questions'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'QuestionsData',
  components: { Pagination },
  data() {
    return {
      questionName: '',
      questionList: [],
      userChoose: [],
      listQuery: {
        currentPage: 1,
        pageSize: 5
      },
      checkDataDialog: false,
      total: 0
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      Question.questionsDetail({ id: this.$route.query.id }).then((res) => {
        console.log(res)
        this.questionName = res.data.questionnaireName
        this.questionList = res.data.topics
      })
    },
    // 查看
    handleCheck(row) {
      console.log(row)
      Question.getWriteAnswerUser({
        currentPage: this.listQuery.currentPage,
        pageSize: this.listQuery.pageSize,
        topicId: row.topicId,
        answerNumber: row.answerNumber
      }).then((res) => {
        console.log(res)
        // this.userChoose=res.data.records;
        this.total = res.data.total
      })
      this.checkDataDialog = true
    }
  }
}
</script>

<style scoped lang='scss'>
#contentBox {
  padding: 20px;
  h3 {
    text-align: center;
  }
}
.el-pagination {
  margin: 20px;
}
</style>
